
import React from 'react' ;

/*
class Result extends React.Component {
    render(){
        return (
            <p>{this.props.count}</p>
        );
    }
}
*/

function Result(props){
    return (
        <p>{props.count}</p>
    );
}

/*
class Increase extends React.Component {
    render(){
        return (
            <button onClick={this.props.increment}>点我增加</button>
        );
    }
}
*/

function Increase(props){
    return (
        <button onClick={props.increment}>点我增加</button>
    );
}

class Counter extends React.Component {
    state = {
        value: 1
    }
    increment = ()=>{
        this.setState({
            value: this.state.value + 1 
        });
    }
    render(){
        return (
            <div className='counter'>
                <Result count={this.state.value}></Result>
                <Increase increment={this.increment}></Increase>
            </div>
        );
    }
}

export default Counter ;